<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/free.css">
    <style>
        .order-item {
            width: 20%;
        }

        .feature-item {
            width: 25%;
        }

        .order-item .order-icon {
            width: 90rem;
            height: 90rem;
        }

        .text+.text {
            border-top: 1px solid #f5f5f5;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-row style="padding-bottom: 120rem;">
            <el-col :xs="24" class="pt-2">
                <div @click="handleLogin" class="bg-white mx-2 py-2 flex rounded-lg">
                    <el-image class="ml-2 flex-shrink rounded-circle" style="width: 150rem;height: 150rem;" 
                        :src="imageApi + (userInfo.Avatar || 'default_avatar.png')" fit="cover">
                        <div slot="error" class="bg-light flex justify-center align-center"
                            style="width: 150rem;height: 150rem;">
                            <i class=" el-icon-picture text-muted" style="font-size: 120rem;"></i>
                        </div>
                    </el-image>
                    <div class="mx-2 w-100 flex justify-between align-center">
                        <div class="flex flex-column">
                            <span class="font font-weight-bold text-dark">{{ userInfo.ID_Name || '游客' }}</span>
                            <span v-show="userInfo.User_Number" class="font text-muted mt-2">{{ userInfo.User_Number || ''}}</span>
                            <span class="font-sm text-muted mt-2">{{ userInfo.Enterprise_Name || '暂未登录'}}</span>
                        </div>
                        <i class="flex-shrink el-icon-arrow-right font-lg text-muted"></i>
                    </div>
                </div>
            </el-col>
            <!-- 订单 -->
            <el-col :xs="24" class="mt-2">
                <div class="mx-2 bg-white rounded-lg">
                    <div class="ml-2 pt-2 font font-weight-bold">我的订单</div>
                    <div class="flex flex-wrap px-2 pb-2">
                        <div @click="toPath(item.path, item.status)"
                            class="order-item flex mt-2 flex-column align-center justify-center"
                            v-for="(item, index) in orderList" :key="index">
                            <div
                                class="order-icon text-white rounded-circle overflow-hidden flex align-center justify-center">
                                <el-image :src="absolutepath() + item.icon" fit="contain"></el-image>
                            </div>
                            <span class="font-sm mt-1">{{ item.name }}</span>
                        </div>
                    </div>
                </div>
            </el-col>
            <!-- 其它 -->
            <el-col :xs="24" class="mt-2">
                <div class="mx-2 bg-white rounded-lg flex flex-column">
                    <div @click="toPath(item.path)" class="text flex py-2 mx-2" v-for="(item, index) in featuresList"
                        :key="index">
                        <div class="w-100">
                            <i class="mr-1 font" :class="item.icon"></i>
                            <span class="font">{{ item.name }}</span>
                        </div>
                        <i class="flex-shrink el-icon-arrow-right font"></i>
                    </div>
                </div>
            </el-col>
            <tab-bar :selected="2"></tab-bar>
        </el-row>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../utils/jweixin.js"></script>
    <script type="text/javascript" src="../../../utils/components.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../../../utils/http.js"></script>
    <script type="text/javascript" src="js/my.js"></script>
</body>

</html>
